<template>
  <div class="sideber">
    <div class="sign-in">
      <div
        class="No-sign-in"
        v-show="UserDatail.nickname === undefined"
        @click="handleSignStatus"
      >
        <i class="user-icon iconfont icon-yonghu"></i>
        <span>未登入</span>
      </div>
      <div class="Yes-sign-in" @click="handleTiggeterUser" v-show="UserDatail.nickname">
        <img :src="$utils.getImgUrl(UserDatail.avatarUrl, 40, 40)" alt />
        <span>{{ UserDatail.nickname }}</span>
      </div>
    </div>
    <!-- 登入窗口界面 -->
    <div class="Login-Interface" v-show="SignStatus">
      <div class="Login-Interface-header">
        <div>
          登录
          <button class="Herder-button" @click="handleButton">X</button>
        </div>
      </div>

      <div class="Login-Interface-text">
        <input
          type="text"
          autocomplete="off"
          v-model="message"
          placeholder="请输入您的网易云uid"
          class="Login-Interface-input"
        />
        <div class="text-help">
          <p class="help">
            1、请点我
            <a href="http://music.163.com" target="_blank"
              >(http://music.163.com)</a
            >打开网易云音乐官网
          </p>
          <p class="help">2、点击页面右上角的“登录”</p>
          <p class="help">3、点击您的头像，进入我的主页</p>
          <p class="help">
            4、复制浏览器地址栏 /user/home?id= 后面的数字（网易云 UID）
          </p>
        </div>
      </div>

      <div class="Login-Interface-footer">
        <button class="footer-button" @click="GetLoginData">登录</button>
      </div>
    </div>
    <!-- 注销窗口界面 -->
    <div class="No-Logout-interface" v-show="cancellation">
      <div class="Login-Interface-header">
        <div>
          提示
          <button class="Herder-button" @click="handleCancellationbtn">
            X
          </button>
        </div>
      </div>
      <p class="help">确定要注销吗？</p>
      <div class="Login-Interface-footer">
        <button class="footer-button" @click="GetCancellation">确定</button>
      </div>
    </div>

    <ul class="sideber-list">
      <li
        class="sidebar-item"
        :class="[currentPath === item.path ? 'active' : '']"
        v-for="item of defaultSidebars"
        :key="item.iconClass"
        @click="navToPage(item.path)"
      >
        <i class="iconfont iconfont icon-component" :class="item.iconClass"></i>
        <span class="name">{{ item.name }}</span>
      </li>
    </ul>
    <div class="User-SongsList">
      <ul class="User-SongsList-creat">
        <p class="menu-block-title" v-show="this.Creatlist.length">
          创建的歌单
        </p>
        <li
          class="sidebar-list"
          v-for="item of Creatlist"
          :key="item.id"
          @click="tiggeterCreatlist(item)"
        >
          <i class="iconfont iconfont icon-component icon-yinyue"></i>
          <span class="name">{{ item.name }} </span>
        </li>
      </ul>
      <ul class="User-SongsList-Collection">
        <p class="menu-block-title" v-show="this.Otherlist.length">
          收藏的歌单
        </p>
        <li
          class="sidebar-list"
          v-for="item of Otherlist"
          :key="item.id"
          @click="tiggeterOtherlist(item)"
        >
          <i class="iconfont iconfont icon-component icon-yinyue"></i>
          <span class="name">{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { fetchLUserDatail, fetchLUserPlaylist } from "../api";
export default {
  data() {
    return {
      defaultSidebars: [
        { name: "发现音乐", iconClass: "icon-music", path: "/discovery" },
        {
          name: "推荐歌单",
          iconClass: "icon-playlist-menu",
          path: "/playlists",
        },
        { name: "最新音乐", iconClass: "icon-yinyue", path: "/songs" },
        { name: "最新MV", iconClass: "icon-mv", path: "/mvs" },
      ],
      currentPath: "",
      //登入界面的状态
      SignStatus: false,
      //注销界面的状态
      cancellation: false,
      message: "",
      //当前路径
      UserDatail: {},
      UserPlaylist: {},

      Creatlist: [],
      Otherlist: [],
    };
  },
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  // },
  // mounted() {
  //   console.log(this.$store);
  // },
  //路由首字母刷新变成大写转化成小写
  watch: {
    $route(routeParams) {
      const { path } = routeParams;
      this.currentPath = path.toLowerCase();
      //console.log(this.currentPath);
    },
  },

  mounted() {},

  methods: {
    getPlaylistId(item) {
      const itemId = item.id;
      this.$router.push({
        path: "/PlaylistDetail",
        query: {
          Arrid: itemId,
        },
      });
    },

    tiggeterCreatlist(item) {
      this.getPlaylistId(item);
    },
    tiggeterOtherlist(item) {
      this.getPlaylistId(item);
    },

    navToPage(path) {
      this.$router.push({ path });
    },
    handleSignStatus() {
      this.SignStatus = !this.SignStatus;
    },
    handleTiggeterUser() {
      this.cancellation = !this.cancellation;
    },
    handleButton() {
      this.SignStatus = false;
    },
    handleCancellationbtn() {
      this.cancellation = false;
    },
    GetCancellation() {
      this.UserDatail = "";
      this.Creatlist = "";
      this.Otherlist = "";
      this.cancellation = false;
    },

    GetLoginData() {
      this.init();
      this.SignStatus = false;
      // this.message = "";
    },

    async init() {
      try {
        const res = await fetchLUserDatail({ uid: this.message });
        this.UserDatail = res.profile;

        const song = await fetchLUserPlaylist({
          uid: this.message,
          limit: 1000,
        });
        this.UserPlaylist = song.playlist;

        song.playlist.forEach((item) => {
          if (String(item.creator.userId) === this.message) {
            this.Creatlist.push(item);
          } else {
            this.Otherlist.push(item);
          }
        });
      } catch (error) {
        alert("网易云uid错误,请重新输入");
      }
    },
  },
};
</script>


<style lang='less' scoped>
.sideber {
  // position: relative;
  width: 249px;
  height: 100%;
  overflow: auto;
  background-color: #ddd;

  .Login-Interface {
    position: fixed;
    top: 160px;
    left: 40%;
    height: 300px;
    width: 320px;
    background: #f2f2f1;
    z-index: 3;
    //margin: 0 auto;
    .Login-Interface-header {
      position: relative;
      width: 100%;
      padding: 10px 10px;
      .Herder-button {
        float: right;
        border: none;
      }
    }
    .Login-Interface-text {
      width: 260px;
      margin: 20px 28px 10px 28px;
      .Login-Interface-input {
        width: 100%;
        height: 20px;
        border: none !important;
        color: #606266;
        background: #fff;
      }
      .text-help {
        width: 100%;
        margin-top: 20px;
        > p {
          margin: 5px 0px;
          > a {
            color: #d33a31;
          }
        }
      }
    }
    .Login-Interface-footer {
      width: 260px;
      height: 30px;
      margin: 20px 28px 10px 28px;
      .footer-button {
        width: 100%;
        height: 30px;
        color: white;
        background: #d33a31;
        border: none;
        border-radius: 3px;
      }
    }
  }
  //注销界面
  .No-Logout-interface {
    position: fixed;
    top: 160px;
    left: 40%;
    height: 150px;
    width: 320px;
    background: #f2f2f1;
    z-index: 3;
    > p {
      width: 260px;
      margin: 10px 20px;
    }
    .Login-Interface-header {
      position: relative;
      width: 100%;
      padding: 10px 10px;
      .Herder-button {
        float: right;
        border: none;
      }
    }
    .Login-Interface-footer {
      width: 260px;
      height: 30px;
      margin: 20px 28px 10px 28px;
      .footer-button {
        width: 100%;
        height: 30px;
        color: white;
        background: #d33a31;
        border: none;
        border-radius: 3px;
      }
    }
  }

  .sign-in {
    height: 60px;

    &:hover {
      background-color: rgb(231, 231, 231);
    }

    .No-sign-in {
      // display: none;
      padding-left: 18px;
      line-height: 70px;
      font-size: 13px;
      color: #333;
      cursor: pointer;
      > span {
        margin-left: 15px;
      }
    }
    .Yes-sign-in {
      padding-left: 18px;
      line-height: 70px;
      font-size: 13px;
      color: #333;
      cursor: pointer;
      > img {
        position: relative;
        top: 13px;
        right: 5px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
  }
  .sidebar-item {
    padding-left: 18px;
    line-height: 40px;
    font-size: 13px;
    color: #333;
    cursor: pointer;

    .name {
      padding-left: 10px;
    }

    &:hover {
      background-color: rgb(231, 231, 231);
    }

    &.active {
      color: rgb(215, 77, 69);
      background-color: rgb(231, 231, 231);
    }
  }
  .User-SongsList {
    position: relative;
    width: 100%;
    margin-top: 15px;
    .menu-block-title {
      color: #909090;
      font-size: 13px;
      padding-bottom: 10px;
      margin-left: 18px;
    }

    .sidebar-list {
      padding-left: 18px;
      line-height: 40px;
      font-size: 13px;
      color: #333;
      cursor: pointer;
      //三件套
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .name {
        padding-left: 10px;
      }

      &:hover {
        background-color: rgb(231, 231, 231);
      }

      &.active {
        color: rgb(215, 77, 69);
        background-color: rgb(231, 231, 231);
      }
    }
  }
}
</style>
